<template>
    <el-card class="box-card" shadow="never">
        <!-- 操作按钮区域 -->
        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" size="small">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchQuery">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格树内容栏-->
        <el-table :data="tableData" stripe size="mini" style="width: 100%;" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)" v-loading="loading" element-loading-text="拼命加载中">
            <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
            </el-table-column>
            <table-tree-column prop="permissionsName" header-align="center" treeKey="id" min-width="210" label="名称">
            </table-tree-column>
            <el-table-column header-align="center" show-overflow-tooltip align="center" label="图标">
                <template slot-scope="scope">
                    <img :src="scope.row.icon" width="20px" height="20px" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="type" header-align="center" align="center" label="类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type == 0" size="small">目录</el-tag>
                    <el-tag v-else-if="scope.row.type = 1" size="small" type="success">菜单</el-tag>
                    <!-- <el-tag v-else-if="scope.row.type == 2" size="small" type="info">按钮</el-tag> -->
                </template>
            </el-table-column>
            <el-table-column prop="pid" header-align="center" align="center" width="120" label="上级菜单">
                <template slot-scope="scope">
                    {{text(tableData,scope.row.pid)}}
                </template>
            </el-table-column>
            <el-table-column prop="path" header-align="center" align="center" width="150" :show-overflow-tooltip="true"
                label="菜单URL">
            </el-table-column>
            <el-table-column prop="ordernum" header-align="center" align="center" label="排序">
            </el-table-column>
            <el-table-column prop="rmk" header-align="center" align="center" width="150" :show-overflow-tooltip="true"
                label="备注">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="240" label="操作">
                <template slot-scope="scope">
                    <a @click="handleEdit(scope.row)">编辑</a>
                    <el-divider direction="vertical" />
                    <a @click="handleAddChild(scope.row)">添加子菜单</a>
                    <el-divider direction="vertical" />
                    <el-dropdown>
                        <a class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </a>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><a @click="handleDetail(scope.row)">详情</a></el-dropdown-item>
                            <el-dropdown-item>
                                <el-popconfirm title="确定删除吗?" @confirm="() => handleDelete(scope.row.id)">
                                    <a slot="reference">删除</a>
                                </el-popconfirm>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <MenuDialog ref="modalForm" @ok="modalFormOk" />
        <MenuChildDialog ref="modalChildForm" @ok="modalChildFormOk" />
    </el-card>
</template>

<script>
    import TableTreeColumn from './components/TableTreeColumn'
    import {
        JeecgMenuListMixin
    } from '@/utils/JeecgMenuListMixin.js'
    import MenuDialog from './modules/MenuDialog.vue'
    import MenuChildDialog from './modules/MenuChildDialog.vue'
    export default {
        name: "MenuList",
        mixins: [JeecgMenuListMixin],
        components: {
            MenuDialog,
            TableTreeColumn,
            MenuChildDialog
        },
        data() {
            return {
                filters: {
                    name: ''
                },
                tableData: [],
                url: {
                    list: "/sysuser/permissions",
                    delete: "/sysuser/del",
                    childAdd:"我"
                },
            };
        },
        computed: {
            text() {
                return function(data,val) {
                    let s = data.map(r => {
                        if (r.id == val) {
                            return r
                        }
                    }).filter(o=>o !=undefined)
                    if(s.length>0){
                         return s[0].permissionsName
                    }
                    return '/'
                }
            }
        },
        methods: {
            handleAddChild(record){
                console.log(record);
                this.$refs.modalChildForm.edit(record)
                this.$refs.modalChildForm.title = "添加子菜单";
                this.$refs.modalChildForm.disableSubmit = false;
            },
            modalChildFormOk(){

            }
        }
    }
</script>

<style scoped>
    a {
        color: #1890FF;
        cursor: pointer;
    }
</style>
